<template>
	<view class="content">
		<view class="card">
			<view class="card-title full-block">
				用电统计
				<view class="blue" @tap="toEcharts">
					查看用电曲线图
				</view>
			</view>
			<view class="card-content">
				<view class="card-block full-block">
					用电总量：{{info.totalUse}}
				</view>
				<view class="card-block">
					本月用电：{{info.currentMonthUse}}
				</view>
				<view class="card-block">
					上月用电：{{info.lasttMonthUse}}
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">电压电流报警</view>
			<view class="card-content">
				<view class="card-block">
					本月：{{info.currentMonthDanYa}}
				</view>
				<view class="card-block">
					最大值：{{info.currentMonthDanYaMax}}
				</view>
				<view class="card-block">
					上月：{{info.lastMonthDanYa}}
				</view>
				<view class="card-block">
					最大值：{{info.lastMonthDanYaMax}}
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">电缆温度报警</view>
			<view class="card-content">
				<view class="card-block">
					本月：{{info.currentMonthWenDu}}
				</view>
				<view class="card-block">
					最大值：{{info.currentMonthWenDuMax}}
				</view>
				<view class="card-block">
					上月：{{info.lastMonthWenDu}}
				</view>
				<view class="card-block">
					最大值：{{info.lastMonthWenDuMax}}
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">剩余电流报警</view>
			<view class="card-content">
				<view class="card-block">
					本月：{{info.currentMonthShengYu}}
				</view>
				<view class="card-block">
					最大值：{{info.currentMonthShengYuMax}}
				</view>
				<view class="card-block">
					上月：{{info.lastMonthShengYu}}
				</view>
				<view class="card-block">
					最大值：{{info.lastMonthShengYuMax}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {},
				name: ''
			};
		},
		onLoad(e) {
			this.id = e.id
			this.name = e.name
			uni.setNavigationBarTitle({
				title: e.name
			})
			this.getData()
		},
		methods: {
			getData(){
				this.$api.get('api/mobile/getDeviceBigData',{id: this.id}).then(res => {
					this.info = res.result
				})
			},
			toEcharts(){
				uni.navigateTo({
					url: `echarts?id=${this.id}&name=${this.name}`
				});
			}
		}
	}
</script>

<style lang="scss">
.content{
	padding: 20rpx;
	.card{
		padding: 60rpx 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		&+.card{
			border-top: 1rpx solid #989898;
		}
	}
	.card-title{
		display: flex;
		justify-content: space-between;
		padding-bottom: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.card-content{
		display: flex;
		flex-wrap: wrap;
	}
	.card-block{
		width: 50%;
		padding-bottom: 40rpx;
		font-size: 32rpx;
	}
	.full-block{
		width: 100%;
	}
	.blue{
		font-size: 28rpx;
		color: #0026ff;
	}
}
</style>
